<template>
	<view class="m-header" :style="{ paddingTop: barHeight + 'px'}">
    <slot></slot>
  </view>
</template>

<script>
	export default {
    props: {
      title: {
        type: String
      },
      statusBarHeight: Number
    },
		data() {
			return {
        headerstyle: '',
        barHeight: 0
			};
		},
    mounted() {
      uni.getSystemInfo({
        success: (res) => {
          this.barHeight = res.statusBarHeight
        }
      })
    }
	}
</script>

<style lang="scss" scoped>
.m-header {
  background-color: #fff;
  height: 44px;
  padding-left: 22rpx;
  padding-right: 22rpx;
  display: flex;
  align-items: center;
  box-sizing: content-box;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  
  .title {
    flex: 1;
    font-size: 32rpx;
    line-height: 44px;
    color: #000;
    font-weight: bold;
  }
  .left {
    width: 90rpx;
    position: absolute;
    left: 0;
    top: 0;
    height: 44px;
    line-height: 44px;
    .uni-btn-icon {
      height: 44px;
      line-height: 44px;
      padding: 0 10rpx;
      font-size: 52rpx;
      color: #000;
    }
  }
  .right {
    width: 90rpx;
    position: absolute;
    right: 0;
    top: 0;
    height: 44px;
    line-height: 44px;
    font-size: 26rpx;
  }
}
</style>
